<template>
  <view class="container">
    <Table ref="table" :fetchData="fetchData" :autoFetch="false">
      <template #default="{ data }">
        <Card
          @click="cardClick(item)"
          v-for="item in data"
          :title="
            item.preventionCheckTaskConfig
              ? item.preventionCheckTaskConfig.deviceName
              : ''
          "
          :ff="formathour(item.endTime)"
          :fr="
            item.preventionCheckTaskConfig
              ? item.preventionCheckTaskConfig.analysisUnit
              : ''
          "
          :state="item.taskState"
        >
          <view class="item">
            <view class="list-item">
              <view class="label"> 单元名称： </view>
              <view class="value">
                {{
                  item.preventionCheckTaskConfig
                    ? item.preventionCheckTaskConfig.analysisUnit
                    : ""
                }}
              </view>
            </view>

            <view class="list-item">
              <view class="label"> 排查周期： </view>
              <view class="value">
                {{
                  item.preventionCheckTaskConfig
                    ? item.preventionCheckTaskConfig.cycle +
                      item.preventionCheckTaskConfig.unit
                    : ""
                }}
                <text style="color: orange"
                  >剩余时间 {{ formathour(item.endTime) }}</text
                >
              </view>
            </view>
            <view class="list-item">
              <view class="label"> 排查内容： </view>
              <view class="value">
                {{
                  item.preventionCheckTaskConfig
                    ? item.preventionCheckTaskConfig.hiddenContent
                    : ""
                }}
              </view>
            </view>
          </view>
          <template #footer>
            <view
              style="width: 100vw; display: flex; justify-content: space-around"
            >
              <button
                type="primary"
                size="mini"
                @click="onSubmit('正常', item)"
              >
                正常
              </button>
              <button type="warn" size="mini" @click="onSubmit('异常', item)">
                异常
              </button>
            </view>
          </template>
        </Card>
      </template>
    </Table>
  </view>
</template>
<script>
export default {
  data() {
    return {
      id: "",
    };
  },
  onLoad(payload) {
    if (payload.id) {
      this.id = payload.id;
    }
  },
};
</script>
<script setup>
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Table from "@/components/uniList.vue";
import { useAsyncData } from "@/hooks/useAsyncData.js";
import { apis as APIS } from "@/api/yhpc/pcrw.js";
import { router } from "@/router/index.js";
import { PATH } from "../paths";
import Card from "./Card.vue";
const parentNode = ref({});
const filterForm = reactive({
  checkTaskConfigId: null,
});
const cardClick = (item) => {
  // router.toPage({
  //   path: PATH.PCRWDETAIL,
  //   params: {
  //     row: JSON.stringify({ ...parentNode.value, ...item }),
  //     id: item.id,
  //   },
  // });
};
const table = ref();
const { fetchData, getList, queryParams } = useAsyncData({
  table,
  APIS: {
    ...APIS,
    query: APIS.getAllTaskByUnitId,
  },
  filterForm,
});

const formathour = (time) => {
  const nowNum = Date.now();
  const times = new Date(time).getTime();
  let seconds = (times - nowNum) / 1000;
  let text = "";
  if (seconds > 0) {
    if (seconds >= 3600) {
      let hour = (seconds / 3600).toFixed(1);
      console.log();

      text += hour + "小时";
    } else {
      let hour = (seconds / 60).toFixed(1);
      text += hour + "分钟";
    }
  } else {
    text = "已超时";
  }
  return text;
};
onMounted(() => {
  const { id } = getCurrentInstance().data;
  queryParams.value.id = id;
  filterForm.id = id;
  getList();
});
onShow(() => {
  const { id } = getCurrentInstance().data;
  queryParams.value.id = id;
  filterForm.id = id;
  getList(true);
});
const onSubmit = (checkResult, item) => {
  let imei = uni.getStorageSync("imei");
  if (checkResult == "异常") {
    router.toPage({
      path: "/pages/yhpc/yhdj/components/dj",
      params: {
        preventionCheckTaskId: item.id,
        preventionCheckTaskConfigId: item.preventionCheckTaskConfig?.id,
        tempType: 1,
        checkResult,
        mobileCode: imei,
      },
    });
  } else {
    if (imei) {
      uni.showModal({
        title: "提示",
        content: `是否确认该任务为${checkResult}`,
        success: function (res) {
          if (res.confirm) {
            APIS.updateTaskState({
              checkResult,
              id: item.id,
              mobileCode: imei,
            }).then((res) => {
              getList();
              // if (checkResult == "异常") {
              //   uni.showModal({
              //     title: "提示",
              //     content: `是否跳转至隐患登记`,
              //     success: function (res) {
              //       if (res.confirm) {
              //         router.toPage({
              //           path: "/pages/yhpc/yhdj/components/dj",
              //           params: {
              //             preventionCheckTaskId: item.id,
              //             preventionCheckTaskConfigId:
              //               item.preventionCheckTaskConfig?.id,
              //             tempType: 1,
              //           },
              //         });
              //       }
              //     },
              //   });
              // }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    } else {
      uni.showModal({
        title: "IMEI码",
        editable: true,
        success: function (res) {
          if (res.confirm) {
            uni.setStorageSync("imei", res.content);
          }
        },
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10upx 14upx;
}
.title {
  display: flex;
  justify-content: space-between;

  &-left {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  &-times {
    background-color: rgb(22, 119, 255);
    padding: 2px;
    font-size: 12px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: 5px;
    color: #fff;
  }
}

.list-item {
  display: flex;
  padding: 10upx 30upx;
  .value {
    width: 450upx;
  }
  .label {
    width: 200upx;
    margin-right: 20upx;
  }
}
</style>
